﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="AllPageNumbers">
    <h2><DemoNavLink Link="Pager#AllPageNumbers" />Pager - All Page Numbers Visible</h2>
    <p>
        This example demonstrates the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager">Pager</a> component that displays all its page numbers simultaneously.
    </p>
    <p>
        When all page numbers are displayed, the Pager's navigation buttons are hidden. To disable this behavior and always display navigation buttons, set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.AutoHideNavButtons">AutoHideNavButtons</a> property to <b>false</b>.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Click page numbers" />
    </div>
    <div class="card-body overflow-auto">
        <DxPager PageCount="10"
                 ActivePageIndex="2"
                 VisibleNumericButtonCount="10"
                 SizeMode="SizeMode">
        </DxPager>
    </div>
</div>

<CodeSnippet_Pager_Small/>
